<template>
  <view class="confirm-done-page">
    <view class="form">
      <view class="item">
        <view class="label">附加费</view>
        <input v-model="payload.money" type="digit" placeholder="请输入附加费用">
        <view class="unit">元</view>
      </view>
      <view class="photo-box">
        <view class="label">完工照片</view>
        <view class="list">
          <view v-for="(item, index) in payload.photos" :key="index" class="sub">
            <image class="photo" :src="STATIC_PATH + item" mode="aspectFill" @click="preview(index)"></image>
            <view class="close" @click="remove(index)"></view>
          </view>
          <view class="sub" @click="handleUpload">
            <image class="icon" src="/subpages/static/camera.png"></image>
            <text class="prompt">上传完工照片</text>
          </view>
        </view>
      </view>
    </view>
    <button-fixed @submit="handleSubmit">提交审核</button-fixed>
  </view>
</template>

<script>
  import { uploadFile } from '@/utils/utils/'
  import { STATIC_PATH } from '@/config/'
  import { CompleteOrdersApi } from '@/api/'
  const app = getApp()
  
  export default {
    data() {
      return {
        STATIC_PATH,
        payload: {
          order_id: '',
          money: '',
          photos: []
        }
      };
    },
    methods: {
      handleSubmit() {
        if (this.payload.photos.length === 0) {
          uni.showToast({
            icon: 'none',
            title: '请上传完工照片'
          })
          return
        }
        const params = {
          order_id: this.payload.order_id,
          additional_price: this.payload.money,
          images: this.payload.photos.join(','),
        }
        CompleteOrdersApi(params).then(() => {
          uni.showToast({
            icon: 'success',
            title: '提交成功',
            success: () => {
              setTimeout(() => {
                uni.navigateBack({
                  success() {
                    app.getLast().then((target) => {
                      target.$vm.loadRes()
                    })
                  }
                })
              }, 1200)
            }
          })
        }).catch(() => {})
      },
      preview(current) {
        uni.previewImage({
          current,
          urls: this.payload.photos.reduce((a, v) => [...a, STATIC_PATH + v], [])
        })
      },
      // 上传
      handleUpload() {
        uploadFile({
          success: (res) => {
            this.payload.photos.push(res.data.url)
          }
        })
      },
      // 删除
      remove(idx) {
        this.payload.photos = this.payload.photos.filter((v, i) => i !== idx)
      }
    },
    onLoad(options) {
      this.payload.order_id = options.id
    }
  }
</script>

<style lang="scss">
.confirm-done-page {
  .form {
    width: 690rpx;
    margin: auto;
    overflow: hidden;
    .item {
      width: 100%;
      height: 88rpx;
      background: #FFFFFF;
      border-radius: 10rpx;
      margin: 20rpx 0 30rpx;
      box-sizing: border-box;
      padding: 0 30rpx;
      @include flex;
      .label {
        font-size: 24rpx;
        color: #333333;
        width: 252rpx;
      }
      input {
        height: 88rpx;
        flex: 1;
        font-size: 24rpx;
        color: #333;
        line-height: 1.4;
      }
      .unit {
        font-size: 24rpx;
        color: #333;
      }
    }
    .photo-box {
      padding: 0 30rpx;
      box-sizing: border-box;
      background: #FFFFFF;
      border-radius: 10rpx;
      .label {
        font-size: 24rpx;
        color: #333;
        line-height: 80rpx;
      }
      .list {
        overflow: hidden;
        @include flex(row,flex-start,flex-start,wrap);
        .sub {
          width: calc((100% - 40rpx) / 3);
          height: 150rpx;
          margin-right: 20rpx;
          margin-bottom: 20rpx;
          @include flex(column);
          overflow: hidden;
          border-radius: 10rpx;
          background-color: #E6E6E6;
          position: relative;
          &:nth-child(3n) {
            margin-right: 0;
          }
          .photo {
            width: 100%;
            height: 100%;
          }
          .close {
            position: absolute;
            top: 0;
            right: 0;
            @include close(52, #fff);
            background-color: rgba(#000,.5);
          }
          .icon {
            width: 45rpx;
            height: 40rpx;
            opacity: 0.68;
            margin-bottom: 20rpx;
          }
          .prompt {
            width: 147rpx;
            height: 23rpx;
            font-size: 24rpx;
            color: #666666;
          }
        }
      }
    }
  }
}
</style>
